<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" background-color="#334256" text-color="#ffffff"
      active-text-color="#20a0ff" :select="selectChange" :collapse="collapse" router>

      <template v-for="item in items">
        <template>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            {{ item.title }}
          </el-menu-item>
        </template>
      </template>
      <!--有二级目录的-->
      <!--<template v-for="(item, index) in items">-->
      <!--<el-menu-item v-if="!item.children" :key="index" :index="item.index" >-->
      <!--<i :class="item.icon"></i>-->
      <!--<span class="span4" slot="title">{{item.title}}</span>-->
      <!--</el-menu-item>-->
      <!--<el-submenu v-else :key="index" :index="item.icon">-->
      <!--<template slot="title">-->
      <!--<i :class="item.icon"></i> <span class="span4" slot="title">{{item.title}}</span>-->
      <!--</template>-->
      <!--<template v-for="(etem, index) in item.children">-->
      <!--<el-menu-item style="background:none; border-radius: 0" :index="etem.index" :key="index">-->
      <!--<i :class="item.icon"></i>{{etem.title}}-->
      <!--</el-menu-item>-->
      <!--</template>-->
      <!--</el-submenu>-->
      <!--</template>-->
    </el-menu>
  </div>
</template>

<script>
// import bus from "../../static/js/bus"
export default {
  data() {
    return {
      collapse: false,
      show: false,

      items: [

        {
          icon: 'el-icon-s-custom',
          index: 'manage',
          title: '管理员管理',

        },
        {
          icon: 'el-icon-date',
          index: 'course',
          title: '课程管理',

        },
        {
          icon: 'el-icon-document',
          index: 'order',
          title: '订单管理'
        },
        {
          icon: 'el-icon-document-remove',
          index: 'project',
          title: '方案管理',

        },
        {
          icon: 'el-icon-coin',
          index: 'overdue',
          title: '逾期催收'
        },
        {
          icon: 'el-icon-s-platform',
          index: 'user',
          title: '用户管理',

        },
        {
          icon: 'el-icon-chat-dot-square',
          index: 'feedBack',
          title: '问题反馈'
        },
        // {
        //   icon: 'el-icon-setting',
        //   index: 'setUpdate',
        //   title: '系统配置'
        // },


      ]
    }
  },
  computed: {
    onRoutes() {

      return this.$route.path.replace('/', '');
    },
    selectChange(e) {

    }
  },

}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  background-color: #334256;
  overflow-y: scroll;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar-el-menu:not(.el-menu--collapse) {
  width: 150px;
}

.sidebar>ul {
  height: 100%;
}

.sidebar-el-menu[data-v-3482d7f7]:not(.el-menu--collapse) {
    width: 0.98125rem !important;
}
</style>
